<template>
	<view class="header_search" :style="swiperStyle">
		<view class="header_search_back" :style="swiperbackStyle">

		</view>
		<img class="images" src="@/static/logo1.png" alt="" />
		<view class="searchBox">
			景区/酒店/线路/演出
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps,
		watch,
		defineEmits,
		getCurrentInstance
	} from 'vue'

	import {
		onShow
	} from "@dcloudio/uni-app"

	// 小程序距离顶部距离
	const iStatusBarHeight = ref("")

	const swiperStyle = ref({})
	const swiperbackStyle = ref({})
	onShow(() => {
		iStatusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		swiperStyle.value.paddingTop = iStatusBarHeight.value + 'px'
	})

	const {
		base_static
	} = getCurrentInstance()?.appContext.config.globalProperties

	// const swiperCheck = defineProps(['swiperCheck'])

	const props = defineProps({
		data: {
			type: Object,
			default: () => {}
		},
		flag: {
			type: Boolean,
			default: true
		}
	})


	watch(() => props.flag, (headerFlag) => {

		// console.log(headerFlag, props.data.img, 'headerFlag', props)
		if (headerFlag) {
			setTimeout(() => {
				// console.log(headerFlag, props.data.img, 'headerFlag', props)
				swiperStyle.value.backgroundImage = 'url(' + base_static + props.data.img + ')'
				swiperStyle.value.backgroundRepeat = 'no-repeat'
				swiperStyle.value.paddingTop = iStatusBarHeight.value + 'px'
				swiperStyle.value.backgroundSize = 'cover'
				swiperbackStyle.value.backdropFilter = 'blur(2px)'
			})
		} else {
			swiperStyle.value = {}
			swiperStyle.value.paddingTop = iStatusBarHeight.value + 'px'
			swiperbackStyle.value = {}
		}

	})
</script>

<style lang="less">
	.header_search {
		width: 100%;
		display: flex;
		align-items: center;
		height: 100rpx;
		// box-sizing: border-box;
		// padding: 0 20rpx;
		position: fixed;
		// /* #ifdef MP-WEIXIN */
		top: 0;
		// /* #endif */
		// /* #ifdef H5 */
		// top: 44px;
		// /* #endif */
		z-index: 9;

		background: rgba(250, 250, 250, 0);

		.header_search_back {
			position: fixed;
			width: 100%;
			height: 100rpx;
			z-index: 10;
			// /* #ifdef MP-WEIXIN */
			top: 0;
			// /* #endif */
			// /* #ifdef H5 */
			// top: 44px;
			// /* #endif */
		}

		.images {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			position: relative;
			z-index: 11;
			margin-left: 20rpx;
		}
		.searchBox {
			width: 60%;
			height: 72rpx;
			box-sizing: border-box;
			color: #6b6464;
			line-height: 72rpx;
			background: rgba(250, 250, 250, .5);
			border-radius: 50rpx;
			font-size: 26rpx;
			text-align: center;
			position: relative;
			z-index: 11;
		}

	}
</style>